導讀:我們每天的工作都離不開大量的信息流。新技術和快速的互聯(lián)網(wǎng)讓資訊井噴,人們可收集到比紙質(zhì)媒體更多的內(nèi)容。處理眾多網(wǎng)站和應用程序時,用戶不會一目了然地閱讀他們看到的所有
發(fā)表日期:2019-04-19
文章編輯:興田科技
瀏覽次數(shù):12529
標簽:
我們每天的工作都離不開大量的信息流。新技術和快速的互聯(lián)網(wǎng)讓資訊井噴,人們可收集到比紙質(zhì)媒體更多的內(nèi)容。處理眾多網(wǎng)站和應用程序時,用戶不會一目了然地閱讀他們看到的所有內(nèi)容 - 他們首先掃描頁面以找出原因以及它對他們有用。因此,可掃描性是當今網(wǎng)站可用性的重要因素之一。今天的文章探討了這一現(xiàn)象,并提供了如何使數(shù)字產(chǎn)品可掃描的技巧。
什么是可掃描性?
應用于頁面或屏幕,動詞“掃描”意味著匆匆瀏覽或閱讀。因此,可掃描性是將內(nèi)容和導航元素呈現(xiàn)為可以輕松掃描的布局的方式。與網(wǎng)站交互,尤其是第一次,用戶可以快速查看內(nèi)容,分析是否是他們需要的內(nèi)容。任何內(nèi)容都可能成為這個過程中的一個鉤子:單詞,句子,圖像或動畫。
順便說一句,這種行為并不是什么新鮮事:幾十年來,人們經(jīng)常在新的雜志或報紙上開始仔細閱讀文章之前對其進行翻譯。更重要的是,從屏幕上閱讀比在紙上閱讀更累人,因此用戶在他們準備好打擾的時候和地點都會更有選擇性。
為什么這很重要?大約十年前,雅各布尼爾森回答了“人們?nèi)绾卧诰W(wǎng)上閱讀?”的問題,簡單地說:“他們沒有。人們很少逐字閱讀網(wǎng)頁; 相反,他們掃描頁面,挑選單個單詞和句子“。從那以后它沒有太大變化:如果我們不確定它是否符合我們的需求,我們還沒有準備好花時間和精力去探索網(wǎng)站。因此,如果在介紹的第一分鐘沒有任何東西可以抓住,那么用戶將會離開的風險很高。無論網(wǎng)站的類型是什么,可掃描性都是其用戶友好性的重要因素之一。
如何檢查網(wǎng)頁是否可掃描?嘗試將其視為首次使用者并回答兩個問題:
- 您在前幾分鐘看到的內(nèi)容是否符合目標受眾對此頁面的期望?
- 您能在第一分鐘或第二分鐘了解頁面上的信息類型嗎?
如果你不確定這兩個答案都是正面的,也許是時候考慮如何加強網(wǎng)站的可掃描性了。值得投入時間,因為精心掃描的頁面在以下方面變得更加高效:
用戶完成任務并更快地實現(xiàn)目標用戶在搜索他們需要的內(nèi)容時會犯更少的錯誤用戶可以更快地了解網(wǎng)站的結構和導航跳出率降低保留用戶的水平越來越高該網(wǎng)站看起來和感覺更可信SEO率受到積極影響。流行的掃描模式
界面設計師必須考慮的重要事項是眼睛掃描模式,它顯示用戶在最初幾秒內(nèi)如何與網(wǎng)頁交互。當您了解人們?nèi)绾螔呙桧撁婊蚱聊粫r,您可以優(yōu)先處理內(nèi)容并將用戶需要的內(nèi)容放入最明顯的區(qū)域。這個用戶研究領域由Nielsen Norman Group 提供支持 ,為設計人員和可用性專家提供了對用戶行為和交互的更好理解。
收集用戶眼睛跟蹤數(shù)據(jù)的不同實驗表明,有幾種典型的模型,訪問者通常會掃描網(wǎng)站。
Z-pattern對于具有統(tǒng)一信息呈現(xiàn)和弱視覺層次的網(wǎng)頁而言是非常典型的。
另一種方案具有Z字形圖案,該圖案通常用于具有視覺上分割的內(nèi)容塊的頁面。同樣,讀者的眼睛從左上角開始從左到右移動,并在整個頁面上移動到右上角,掃描這個初始交互區(qū)域中的信息。
另一個模型是Nielsen Norman Group 在探索中呈現(xiàn)的F模式, 并顯示用戶經(jīng)常展示以下互動流程:
用戶首先讀取水平移動,通??缭絻?nèi)容區(qū)域的上部。這個初始元素構成了F的頂部欄。接下來,用戶稍微向下移動頁面,然后在第二個水平移動中讀取,該移動通常覆蓋比先前移動更短的區(qū)域。這個額外的元素形成了F的下欄。最后,用戶以垂直移動掃描內(nèi)容的左側。有時這是一個相當緩慢和系統(tǒng)的掃描,在眼動追蹤熱圖上顯示為實心條紋。其他時候用戶移動得更快,創(chuàng)建了一個spottier熱圖。最后一個元素構成了F的詞干。提高可掃描性的技巧
1.使用可視層次結構對內(nèi)容進行優(yōu)先級排序
基本上,視覺層次結構是以對人類感知最自然的方式在頁面上排列和組織內(nèi)容的方式。它背后的主要目標是讓用戶了解每個內(nèi)容的重要性級別。因此,如果應用了可視層次結構,則用戶將首先看到關鍵內(nèi)容。
例如,當我們在博客中看到這篇文章時,我們首先會得到標題,然后是副標題,然后才會復制塊。這是否意味著副本塊中的信息具有較低的重要性?嗯,不,但這樣用戶就可以掃描標題和副標題,以了解文章是否對他們有用和有趣,而不是嘗試閱讀所有文本。如果標題和副標題正確完成并告知用戶文章的結構和內(nèi)容,這將是令人信服的閱讀更多的因素。另一方面,如果用戶看到巨大而長的文本沒有分成塊,他們將會非常害怕,無法理解閱讀本文需要多長時間,以及是否值得投入時間和精力。
有幾個主要因素有助于建立視覺層次結構:
尺寸顏色對比接近負空間重復。所有這些都有助于設計人員將元素,鏈接,圖像和副本集轉換為頁面布局的諧波可掃描系統(tǒng)。
2.將核心導航放入網(wǎng)站標題中
所有提到的眼睛掃描模式顯示,無論特定用戶遵循哪一個,掃描過程將從網(wǎng)頁的頂部水平區(qū)域開始。使用它來展示互動和品牌的關鍵區(qū)域是支持雙方的戰(zhàn)略。這就是為什么網(wǎng)站標題設計不僅被UI / UX設計師而且被內(nèi)容管理者和營銷專家視為一個基本問題的基本原因。
另一方面,標題不應該重載:太多的信息使得無法對焦。將所有內(nèi)容放入頁面頂部的嘗試可以將布局轉換為混亂。因此,在每個特定情況下,必須分析核心目標受眾的目標,他們?nèi)绾闻c網(wǎng)站背后的業(yè)務目標交叉,并以此為基礎 - 哪些信息或導航應該作為最重要的標題。例如,如果它是一個大型電子商務網(wǎng)站,搜索功能必須立即可見,并且通??梢栽跇祟}中找到,以便從任何交互點訪問。對于小型企業(yè)網(wǎng)站而言,搜索功能根本不需要,但是直接看到的投資組合鏈接將是至關重要的。
3.保持負空間的平衡
負空間 - 或者通常稱為空白區(qū)域 - 是布局的空白區(qū)域,不僅在布局中的對象周圍,而且在它們之間和內(nèi)部。負空間是頁面或屏幕上所有對象的一種呼吸空間。它定義了對象的界限,根據(jù)格式塔原則在它們之間創(chuàng)造了必要的聯(lián)系, 并建立了有效的視覺表現(xiàn)。在網(wǎng)站和移動應用的UI設計中,負空間是高導航性的重要因素 接口:沒有足夠的空氣,布局元素沒有被正確看到,因此用戶可能會錯過他們真正需要的東西。這可能是眼睛和大腦緊張的一個強有力的原因,盡管許多用戶將無法解決問題。適量的負空間,特別是微空間,解決了它,使過程更自然。
4.檢查是否立即看到CTA
顯然,絕大多數(shù)網(wǎng)頁都針對用戶必須完成的特定操作。包含號召性用語(CTA)的元素(通常是按鈕)應在幾秒鐘內(nèi)顯示,以便用戶了解他們可以在此頁面上執(zhí)行的操作。好的測試包括在黑白和模糊模式下檢查頁面。如果在這兩種情況下都可以快速區(qū)分CTA元素,那么它們就能很好地完成。例如,在下面顯示的面包店網(wǎng)站的網(wǎng)頁上,可以很容易地在其他元素中看到將項目添加到列表中的CTA按鈕。
5.測試復制內(nèi)容的可讀性
可讀性定義了人們閱讀單詞,短語和副本的容易程度??勺x性衡量用戶如何快速直觀地區(qū)分特定字體中的字母。應仔細考慮這些特性,特別是對于填充了大量文本的界面。背景的顏色,復制塊周圍的空間量,字距調(diào)整,前導,字體類型和字體配對 - 所有這些因素都會影響快速掃描文本和捕獲令用戶留下的內(nèi)容的能力。為了防止這個問題,設計人員必須檢查是否 遵循排版法則以及所選字體是否支持一般的視覺層次和可讀性。用戶測試 將有助于檢查用戶能夠快速輕松地感知文本。
6.應用數(shù)字,而不是單詞
這條建議是基于尼爾森諾曼博客的另一項調(diào)查 。他們分享了一個重要的發(fā)現(xiàn):眼動追蹤研究表明,在掃描網(wǎng)頁的過程中,數(shù)字通常會阻止用戶徘徊并吸引注意力,甚至嵌入大量可以忽略而無數(shù)字的單詞中。我們潛意識地將數(shù)字與事實,統(tǒng)計數(shù)據(jù),大小和距離相關聯(lián) - 這些數(shù)據(jù)可能是有用的。因此,數(shù)字包括在復制捕獲讀者的注意力中,而代表數(shù)字的單詞可能在大量復制中被遺漏。更重要的是,數(shù)字比文本數(shù)字更緊湊,因此它使內(nèi)容更簡潔,更省時。
7.將一個想法放在一個段落中
在可掃描性方面處理復制內(nèi)容,盡量不要使文本的批量太長。短段看起來更容易消化,如果信息對讀者沒有價值,可以更容易跳過。因此,當您在一個段落中提出一個想法并為另一個段落開始另一個想法時,請遵循該規(guī)則。
8.使用編號和項目符號列表
使文本更易于掃描的另一個好方法是使用帶有數(shù)字或項目符號的列表。它們有助于清晰地組織數(shù)據(jù)。此外,它們會引起用戶的注意,因此信息不會在一般文本中丟失。
9.突出顯示文本中的關鍵信息
好舊的大膽,斜體和顏色突出是老派,但他們?nèi)匀怀晒Φ毓ぷ鳌Mㄟ^這種方式,您可以將注意力集中在段落中包含的重要想法,定義,引用或其他類型的特定數(shù)據(jù)上。更重要的是,文本的可點擊部分(鏈接到其他頁面)必須在視覺上標記。我們習慣于看到它們加下劃線,仍然用顏色或更大膽的字體突出顯示它們甚至更有效。
10.使用圖像和插圖
在Web用戶界面設計中,圖像在設置心情或傳遞消息方面具有高度支持性。它們是內(nèi)容既有信息又有情感吸引力。原始插圖,突出的英雄橫幅,引人入勝的照片可以很容易地吸引用戶的注意力,并支持一般的風格概念。更重要的是,它們在構建視覺層次結構方面發(fā)揮了重要作用,并使復制內(nèi)容與插圖或照片相結合,更容易消化。人們比文字更快地感知圖像,這是提高可掃描性的重要因素。
提高網(wǎng)頁,設計人員和內(nèi)容創(chuàng)建者的可掃描性能夠真正尊重網(wǎng)站用戶。這樣我們就可以節(jié)省用戶的時間和精力,為他們提供有組織,和諧,有價值和有吸引力的內(nèi)容。
上一篇:
暫無信息更多新聞
2020
關于網(wǎng)站建設,下面小編告訴大家怎樣來提高網(wǎng)站建設的權重? 1標題:確保網(wǎng)站每一個標題的唯一性也是網(wǎng)站優(yōu)化者必須注重的,只有唯一性才能給你的網(wǎng)站帶來
View details
2020
關于網(wǎng)站建設,您不僅可以用文字、圖片、動畫等方式宣傳自己的產(chǎn)品,而且可以介紹自己的企業(yè),發(fā)布企業(yè)新聞,介紹企業(yè)領導,公布公司業(yè)績,提供售后服務,舉辦產(chǎn)品
View details
2019
我們每天的工作都離不開大量的信息流。新技術和快速的互聯(lián)網(wǎng)讓資訊井噴,人們可收集到比紙質(zhì)媒體更多的內(nèi)容。處理眾多網(wǎng)站和應用程序時,用戶不會一目了然地閱讀他們看到的所有
View details
2020
關于網(wǎng)站建設,當搜索引擎的算法改變或者加強時,導致一些網(wǎng)站的某些關鍵字排名消失,一些管理員就說他們的網(wǎng)站消失了。實際上并非如此,在搜索引擎算法改變
View details